
import { changeColor } from "../../utils/tools"

const theme = {
    state: {
        primary_color: "skyblue",
        styleDom: null, // style标签对象
        deepColor: { // 深色
            deep1_color: "",
            deep2_color: "",
            deep3_color: ""
        },
        thinColor: { // 淡色
            thin1_color: "",
            thin2_color: "",
            thin3_color: ""
        }
    },
    actions: {

        /**
         * 修改primaryColor
         * obj: {
         *  primaryColor: 主颜色
         * }
         */
        setPrimary(context, color) {
            return new Promise((resovle, reject) => {
                try {
                    const primary = {
                        primary_color: color,
                        styleDom: context.state.styleDom, // style标签对象
                        deepColor: { // 深色
                            deep1_color: "",
                            deep2_color: "",
                            deep3_color: ""
                        },
                        thinColor: { // 淡色
                            thin1_color: "",
                            thin2_color: "",
                            thin3_color: ""
                        }
                    }
                    // 计算出新的值
                    let reg = /^rgb\((\d{1,3}),(\d{1,3}),(\d{1,3})\)$/ // 匹配rgb
                    let hex = /^#([\da-zA-Z]{2})([\da-zA-Z]{2})([\da-zA-Z]{2})$/ // 匹配16进制格式的颜色
                    let hex_min = /^#([\da-zA-Z])([\da-zA-Z])([\da-zA-Z])$/ // 匹配缩写的16进制
                    let regStr = ""
                    let hexStr = ""
                    let hexMinStr = ""
                    let r, g, b
                    if ((regStr = color.match(reg))) {
                        // 是rgb格式的
                        r = Number(regStr[1])
                        g = Number(regStr[2])
                        b = Number(regStr[3])
                    } else if ((hexStr = color.match(hex))) {
                        // 是16进制格式的
                        r = Number("0x" + hexStr[1])
                        g = Number("0x" + hexStr[2])
                        b = Number("0x" + hexStr[3])
                    } else if ((hexMinStr = color.match(hex_min))) {
                        // 缩写的16进制
                        r = Number("0x" + hexMinStr[1] + hexMinStr[1])
                        g = Number("0x" + hexMinStr[2] + hexMinStr[2])
                        b = Number("0x" + hexMinStr[3] + hexMinStr[3])
                    }else{
                        reject()
                    }
                    primary.deepColor.deep1_color = changeColor(r, g, b, -10)
                    primary.deepColor.deep2_color = changeColor(r, g, b, -20)
                    primary.deepColor.deep3_color = changeColor(r, g, b, -30)
                    primary.thinColor.thin1_color = changeColor(r, g, b, 10)
                    primary.thinColor.thin2_color = changeColor(r, g, b, 20)
                    primary.thinColor.thin3_color = changeColor(r, g, b, 30)

                    if (!primary.styleDom) {
                        primary.styleDom = document.createElement("style")
                        primary.styleDom.type = "text/css"
                        primary.styleDom.rel = "stylesheet"
                        document.body.appendChild(primary.styleDom)
                    }
                    primary.styleDom.innerHTML = `
                        .primary_color{background-color: ${primary.primary_color} !important;}
                        .primary_deep1_color{background-color: ${primary.deepColor.deep1_color} !important;}
                        .primary_deep2_color{background-color: ${primary.deepColor.deep2_color} !important;}
                        .primary_deep3_color{background-color: ${primary.deepColor.deep3_color} !important;}
                        .primary_thin1_color{background-color: ${primary.thinColor.thin1_color} !important;}
                        .primary_thin2_color{background-color: ${primary.thinColor.thin2_color} !important;}
                        .primary_thin3_color{background-color: ${primary.thinColor.thin3_color} !important;}
                    `
                    
                    context.commit("SET_PRIMARY", primary)
                    resovle()
                    // 先发出异步请求
                } catch (e) {
                    reject(e)
                }
            })
        }
    },
    mutations: {
        // 设置主题颜色
        SET_PRIMARY_COLOR(state, color) {
            state.primary_color = color
        },

        // 修改style dom
        SET_STYLE_DOM(state, dom) {
            state.styleDOm = dom
        },

        // 修改deep对象
        SET_DEEP(state, deep) {
            state.deepColor = {
                ...deep
            }
        },

        // 修改thin对象
        SET_THIN(state, thin) {
            state.thinColor = {
                ...thin
            }
        },

        // 一次性修改主题
        SET_PRIMARY(state, obj) {
            // state = obj 直接修改就不能响应式了
            this.commit("SET_PRIMARY_COLOR", obj.primary_color)
            this.commit("SET_STYLE_DOM", obj.styleDOm)
            this.commit("SET_DEEP", obj.deepColor)
            this.commit("SET_THIN", obj.thinColor)
        }
    }
}

export default theme